<template>
  <div id="bar">
  <!-- 导航栏 -->
    <div class="house-logo">
      <div class="logo">
        <div class="el-icon-s-home">
      </div>
      <div class="haozu">好租</div>
      <div class="haozu1">easy to rent</div>
    </div>
  </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2" @click="allhouse">房源</el-menu-item>
        <el-menu-item index="3" @click="uphouse">发布房源</el-menu-item>
        <el-menu-item index="4" @click="post">帖子</el-menu-item>
    </el-menu>
    <div class="line"></div>
    <!-- 导航栏结束 -->
    </div>
</template>


<script>
export default {
  name: "HelloWorld",
  methods:{
    // 路由跳转
    allhouse() {
      this.$router.push("/allhouse");
    },
    uphouse() {
      this.$router.push("/uphouse");
    },
    post() {
      this.$router.push("/post");
    },
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 导航栏样式 */
.house-logo {
  float: left;
  position: absolute;
  z-index: 5;
  top: 65px;
  left: 90px;
  color: white;
  width: 200px;
  height: 100px;
  cursor: pointer;
}

.logo {
  position: relative;
  width: 200px;
  height: 100px;
}

.haozu {
  position: absolute;
  top: 3px;
  bottom: 20px;
  left: 60px;
  font-size: 35px;
}

.haozu1 {
  position: absolute;
  top: 45px;
  bottom: 20px;
  left: 60px;
  font-size: 15px;
}

.el-icon-s-home:before {
  content: "\e7b9";
  position: absolute;
  z-index: 5;
  font-size: 60px;
  color: white;
  top: 0px;
  left: 0px;
}

.el-menu-item * {
  text-decoration: none;
}

.el-menu {
  background-color: rgba(225, 225, 225, 0);
}

.el-menu-item {
  color: #f2f2f2 !important;
  font-size: 16px;
  text-shadow: 0 0 5px rgb(0 0 0 / 30%);
  font-weight: 900;
  font-size: 18px;
}

.el-menu-item:hover {
  background-color: rgba(225, 225, 225, 0) !important;
  color: white !important;
}

.bgmask {
  background: url(../assets/bgmask.jpg) no-repeat top center;
  height: 450px;
  display: block;
  position: relative;
}

.el-menu--horizontal {
  border-right: none;
  position: absolute;
  top: 65px;
  left: 230px;
  z-index: 5;
  border-bottom: solid 0px rgba(225, 225, 225, 0) !important;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: solid 0px rgba(225, 225, 225, 0);
}
</style>